<template>
  <div class="formView">
    <el-tabs type="border-card" class="demo-tabs">
      <el-tab-pane label="完工单">
        <div class="firstCard">
          <el-row class="colItem">
            <el-col :span="6" class="cardItem">
              <div class="formTitle">任务单号</div>
              <el-input
                v-model="formData.taskNumber"
                disabled
              />
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">任务状态</div>
              <el-select
                v-model="formData.dictTaskCompleteStatus"
                disabled
                clearable
                class="!w-220px"
              >
                <el-option label="已完成" :value="1" />
                <el-option label="未完成" :value="0" />
              </el-select>
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">进度</div>
              <el-input
                v-model="formData.process"
                disabled
              />
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">产品图号</div>
              <el-input
                v-model="formData.productDrawingNumber"
                disabled
              />
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="6" class="cardItem">
              <div class="formTitle">产品编号</div>
              <el-input
                v-model="formData.productNumber"
                disabled
              />
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">客户代码</div>
              <el-input
                v-model="formData.customerCode"
                disabled
              />
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">部件类型</div>
              <el-input
              v-model="formData.partType"
              disabled
              />
            </el-col>
            <el-col :span="6" class="cardItem">
              <div class="formTitle">出图类型</div>
              <el-select
                v-model="formData.dictDrawingType"
                clearable
                class="!w-220px"
                disabled
              >
                <el-option
                  v-for="dict in getIntDictOptions('drawing_type')"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-col>
          </el-row>
          <div class="colItem editType">
            <div class="editTypeTitle">图纸改动类型</div>
            <div class="editTypeTitle">无改动</div>
            <div class="editTypeTitle">规格化改动</div>
            <div class="editTypeTitle">优化改动</div>
            <div class="editTypeTitle">仿制型新产品</div>
            <div class="editTypeTitle">创新型新产品</div>
            <div class="editTypeTitle">合计</div>
          </div>
          <div class="colItem editType">
            <div class="editTypeTitle">图纸改动数量</div>
            <div class="editTypeTitle" v-for="(item, index) in formData.alerts" :key="index"
              ><el-input
                v-model="item['alertQuantity']"
                type="number"
                disabled
            /></div>
          </div>
          <el-row class="colItem">
            <el-col :span="24" class="cardItem">
              <div class="formBigTitle">出图内容</div>
              <el-input
                disabled
                v-model="formData.drawingContent"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="24" class="cardItem">
              <div class="formBigTitle">改动内容</div>
              <el-input
                disabled
                v-model="formData.changeContent"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="24" class="cardItem">
              <div class="formBigTitle">备注</div>
              <el-input
                disabled
                v-model="formData.remark"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="18" class="cardItem">
              <div class="formBigTitle">校对意见</div>
              <el-input
                :disabled="formType === 'view' || ['release', 'audit'].includes(moduleName)"
                v-model="formData.proofreaderOpinion"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
            <el-col :span="6" class="newCardItem">
              <div class="disFlex alignCenter">
                <div class="newFormTitle">校对人</div>
                <el-input v-model="formData.proofreaderName" disabled />
              </div>
              <div class="disFlex alignCenter top-border">
                <div class="newFormTitle">校对时间</div>
                <el-input v-model="formData.proofreaderTime" disabled />
              </div>
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="18" class="cardItem">
              <div class="formBigTitle">审核意见</div>
              <el-input
                :disabled="formType === 'view' || ['release', 'verify'].includes(moduleName)"
                v-model="formData.approverOpinion"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
            <el-col :span="6" class="newCardItem">
              <div class="disFlex alignCenter">
                <div class="newFormTitle">审核人</div>
                <el-input v-model="formData.approverName" disabled />
              </div>
              <div class="disFlex alignCenter top-border">
                <div class="newFormTitle">审核时间</div>
                <el-input v-model="formData.approverTime" disabled />
              </div>
            </el-col>
          </el-row>
          <el-row class="colItem">
            <el-col :span="18" class="cardItem">
              <div class="formBigTitle">批准结果</div>
              <el-input
                disabled
                v-model="formData.ratifyResult"
                maxlength="200"
                :rows="3"
                resize="none"
                show-word-limit
                type="textarea"
              />
            </el-col>
            <el-col :span="6" class="newCardItem">
              <div class="disFlex alignCenter">
                <div class="newFormTitle">批准人</div>
                <el-input v-model="formData.ratifiorName" disabled />
              </div>
              <div class="disFlex alignCenter top-border">
                <div class="newFormTitle">批准时间</div>
                <el-input v-model="formData.ratifyTime" disabled />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图纸清单">
        <el-table border :data="formData.drawings">
          <el-table-column label="图纸图号" align="center" prop="partDrawingNumber" />
          <el-table-column label="零部件名称" align="center" prop="partName" />
          <el-table-column label="数量" align="center" prop="quantity" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="制图流程单">
        <div class="title">基本信息</div>
        <el-form label-width="68px" :inline="true">
          <el-form-item label="产品编号">
            <el-input v-model="formData.productNumber" disabled />
          </el-form-item>
          <el-form-item label="客户代码">
            <el-input v-model="formData.customerCode" disabled />
          </el-form-item>
          <el-form-item label="产品类型">
            <el-select v-model="formData.productType" disabled placeholder="请选择产品类型">
              <el-option label="请选择字典生成" value="" />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="title">基本参数</div>
        <el-form label-width="68px" :inline="true">
          <el-form-item
            v-for="item in formData.baseParams"
            :key="item['id']"
            :label="item['baseParamName']"
          >
            <el-input v-model="item['baseParamValue']" disabled />
          </el-form-item>
        </el-form>
        <div class="title">校对参数</div>
        <el-table border :data="formData.verifyParams" :span-method="arraySpanMethod">
          <el-table-column label="设备/部件名称" align="center" prop="partName" />
          <el-table-column label="项目" align="center" prop="projectName" />
          <el-table-column label="合同要求/总图尺寸" align="center" prop="requirementOrSize" />
          <el-table-column label="设计值" align="center" prop="designValue" />
          <el-table-column label="校对值" align="center" prop="verifyValue">
            <template #default="scope">
              <el-input
                v-nextInput="'verifyValue'"
                name="verifyValue"
                v-model="scope.row.verifyValue"
                :disabled="formType === 'view' || ['release', 'audit'].includes(moduleName)"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { getIntDictOptions } from '@/utils/dict'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => {}
  }
})

const formData = ref({
  id: undefined,
  event: undefined,
  designCompletionNumber: undefined, //设计完工单编号
  taskId: undefined, //任务单id
  taskNumber: undefined, //任务单号
  process: undefined, //任务完成进度
  productDrawingNumber: undefined, //产品图号
  productName: undefined, //产品名称
  productType: undefined, //产品类型
  productNumber: undefined, //产品编号
  partType: undefined, //部件类型
  dictDrawingType: undefined, //出图类型
  drawingContent: undefined, //出图内容
  changeContent: undefined, //改动内容
  alerts: [], //图纸改动数量
  remark: undefined, //备注
  dictTaskCompleteStatus: undefined, //任务状态
  proofreaderOpinion: undefined, //校对意见
  proofreader: undefined,
  proofreaderName: undefined, //校对人姓名
  proofreaderTime: undefined, //校对时间
  approverName: undefined, //审核人
  approverOpinion: undefined, //审核意见
  approverTime: undefined, //审核时间
  approver: undefined,
  ratifyResult: undefined, //批准结果
  ratifiorName: undefined, //批准人
  ratifior: undefined,
  ratifyTime: undefined, //批准时间
  customerCode: undefined, //客户代码
  productStandard: undefined, //产品规格
  drawings: undefined, //图纸清单
  verifyParams: undefined, //校对参数
  baseParams: undefined //基本参数
})

const formRef = ref() // 表单 Ref
const formType = ref('view') //view 查看 update 编辑  查看禁止填写
/**
 * 模块名称： release 发布任务单
 * release 所有内容禁止编辑
 * **/
const moduleName = ref('')
// const verifierLoading = ref(false)  //校对人加载中

// 合并设备/部件名称
const arraySpanMethod = ({ row, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex === 0 || row.partName != formData.value.verifyParams[rowIndex - 1].partName) {
      let rowspan = 0
      formData.value.verifyParams.forEach((element) => {
        if (element.partName === row.partName) {
          rowspan++
        }
      })
      return [rowspan, 1]
    } else {
      return [0, 0]
    }
  }
}

/** 返回结果 */
const getRes = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  console.log(formRef.value)
}

/** 重置数据 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    event: undefined,
    designCompletionNumber: undefined, //设计完工单编号
    taskId: undefined, //任务单id
    taskNumber: undefined, //任务单号
    process: undefined, //任务完成进度
    productDrawingNumber: undefined, //产品图号
    productName: undefined, //产品名称
    productType: undefined, //产品类型
    productNumber: undefined, //产品编号
    partType: undefined, //部件类型
    dictDrawingType: undefined, //出图类型
    drawingContent: undefined, //出图内容
    changeContent: undefined, //改动内容
    alerts: [], //图纸改动数量
    remark: undefined, //备注
    dictTaskCompleteStatus: undefined, //任务状态
    proofreaderOpinion: undefined, //校对意见
    proofreader: undefined,
    proofreaderName: undefined, //校对人姓名
    proofreaderTime: undefined, //校对时间
    approverName: undefined, //审核人
    approverOpinion: undefined, //审核意见
    approverTime: undefined, //审核时间
    approver: undefined,
    ratifyResult: undefined, //批准结果
    ratifiorName: undefined, //批准人
    ratifior: undefined,
    ratifyTime: undefined, //批准时间
    customerCode: undefined, //客户代码
    productStandard: undefined, //产品规格
    drawings: undefined, //图纸清单
    verifyParams: undefined, //校对参数
    baseParams: undefined //基本参数
  }
  formRef.value?.resetFields()
}
defineExpose({ getRes, resetForm, formData })

watch(
  () => props.detailData,
  () => {
    formData.value = props.detailData as any
  }
)

/** 初始化 */
onMounted(() => {
  const { query } = useRoute()
  formType.value = (query as any).type
  moduleName.value = (query as any).moduleName
})
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 20px;
}

.firstCard {
  border: 1px solid #000;

  .newCardItem {
    border-left: 1px solid #000;
  }

  .newFormTitle {
    width: 150px;
    height: 36.5px;
    line-height: 32px;
    background: #e9fbfb;
    text-align: center;
    border-right: 1px solid #000;
  }

  .disFlex {
    display: flex;
  }

  .alignCenter {
    align-items: center;
  }

  .top-border {
    border-top: 1px solid #000;
  }

  .colItem + .colItem {
    border-top: 1px solid #000;
  }

  .editType {
    display: flex;
    align-items: center;

    > div {
      width: 14.2857%;
      text-align: center;
    }

    .editTypeTitle {
      background: #e9fbfb;
    }

    > div + div {
      border-left: 1px solid #000;
    }
  }

  .cardItem {
    display: flex;
    align-items: center;
    line-height: 32px;

    .formTitle {
      flex-shrink: 0;
      width: 150px;
      height: 100%;
      line-height: 32px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }

    .formBigTitle {
      width: 150px;
      flex-shrink: 0;
      line-height: 73px;
      background: #e9fbfb;
      text-align: center;
      border-right: 1px solid #000;
    }
  }

  .cardItem + .cardItem {
    border-left: 1px solid #000;
  }
}
</style>
